{# Load the tag library #}
{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

<!DOCTYPE html>
<html>
  <head>
    <title>{% block head_title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    {% block extra_head %}
    {% endblock %}
  </head>
  <body class="bg-gray-100 text-gray-900">
    {% block body %}

    {% if messages %}
    <div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg" role="alert">
      <strong>Messages:</strong>
      <ul class="list-disc pl-5">
        {% for message in messages %}
        <li>{{message}}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    <div class="p-4 mb-4 bg-white rounded-lg shadow-md">
      <strong>Menu:</strong>
      <ul class="list-disc pl-5">
        {% if user.is_authenticated %}
        <li><a href="{% url 'account_email' %}" class="text-blue-500 hover:underline">Change E-mail</a></li>
        <li><a href="{% url 'account_logout' %}" class="text-blue-500 hover:underline">Sign Out</a></li>
        {% else %}
        <li><a href="{% url 'account_login' %}" class="text-blue-500 hover:underline">Sign In</a></li>
        <li><a href="{% url 'account_signup' %}" class="text-blue-500 hover:underline">Sign Up</a></li>
        {% endif %}
      </ul>
    </div>
    {% block content %}
    {% endblock %}
    {% endblock %}
    {% block extra_body %}
    {% endblock %}
  </body>
</html>
